<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> -->
        <!-- <script src="/bundle.js"></script> -->


        <!-- public/index.html-->

<!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section -->
 <meta name="viewport" content="width=device-width,   user-scalable-no ,initial-scale=1,  maximum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">


<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<style lang="scss"  >

  @import './index.scss' ;

  .circle{
    width: 100px;   
       height: 100px;    
         background-color:red;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

}

body{
    background-color: lightgray;
}

.left_box{
    width: 40%;
    padding-left: 40px;
}



.h11{
    font-size: 45px;
    color: black ;

}

.xiaoyuan_green{
    /* width: 30px;
    height: 30px;
    border: 1px solid greenyellow   空心圆 ;
    border-radius:50% ;
    background: greenyellow; */

    width: 30px;   
       height: 30px;    
         background-color:greenyellow;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;


                  display:inline-block;

}
.xiaoyuan_blue{
    
    width: 30px;   
       height: 30px;    
         background-color:rgba(47, 71, 255, 0.836);    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;


                  display:inline-block;

}
.xiaoyuan_purple{
   

    width: 30px;   
       height: 30px;    
         background-color:rgb(75, 3, 105);    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;


                  display:inline-block;

}

.oneone{
    /* white-space: nowrap; */
    /* display:inline-block; */
   padding: 13px;

}

.priorty{
    color:black  ;
     font-size:30px ;
    display:inline-block;         /* 分别对要在一行的元素设置 */
     padding-left: 10px;
}




.right_box{

    width: 630px;   
       height: 630px;    
       border: 1px solid purple;
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

                  float: right;
                  position: absolute;
                  top: 30px;
                  right: 45px;

}


.dotted1{
    position: absolute;
    top: 330px;
    
    border:1px dashed purple ;
    height: 1px; 
    width: 630px;
}
.dotted2{

    position: absolute;
    right: 305px;
    float: left; 
    width: 0.1em; 
    height: 630px;
    margin-right: 1em; 
     /* background: black; */
     border:1px dashed purple ;
    
}


.rectangle1{

        position: absolute;
        top:70px;
        right:500px;    
    width: 98px;
    height: 25px;
    line-height: 25px;
    background-color:#330033 ;
    text-align: center ;
    color: white;
}

.rectangle2{

position: absolute;
top:70px;
right:130px;    


width: 98px;
    height: 25px;
    line-height: 25px;
background-color: #330033  ;
text-align: center;
color: white;
}
.rectangle3{

position: absolute;
top:200px;
right:600px;    

width: 98px;
    height: 25px;
    line-height: 25px;
background-color: #996600 ;
text-align: center;
color: white;
}
.rectangle4{

position: absolute;
top:200px;
right:30px;    

width: 98px;
    height: 25px;
    line-height: 25px;
background-color: #996600  ;
text-align: center ;
color: white;
}

.rectangle5{

position: absolute;
bottom:200px;
right:600px;    

width: 98px;
    height: 25px;
    line-height: 25px;
background-color: #996600 ;
text-align: center ;
color: white;
}
.rectangle6{

position: absolute;
bottom:200px;
right:30px;    


width: 98px;
    height: 25px;
    line-height: 25px;
background-color: #996600 ;
text-align: center ;
color: white;
}
.rectangle7{

position: absolute;
bottom:70px;
right:500px;    

width: 98px;
    height: 25px;
    line-height: 25px;
background-color: #330033 ;
text-align: center ;
color: white;
}
.rectangle8{

position: absolute;
bottom:70px;
right:130px;    

width: 98px;
    height: 25px;
    line-height: 25px;
background-color: #330033 ;
text-align: center ;
color: white;
}




.dayuan1{
    width: 60px;   
       height: 60px;    
         background-color:greenyellow;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 40px  ;
        right: 375px;

                  
}
.dayuan2{
    width: 60px;   
       height: 60px;    
         background-color:greenyellow;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 120px  ;
        right: 375px;

                  
}
.dayuan3{
    width: 60px;   
       height: 60px;   
         background-color:greenyellow;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 195px  ;
        right: 375px;

                  
}
.dayuan4{
    width: 60px;   
       height: 60px;     
         background-color:greenyellow;    
           border-radius: 50%;  
           /* border: 1px solid black ; */
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 270px  ;
        right: 375px;

                  
}

.dayuan5{
    width: 60px;   
       height: 60px;     
         background-color:greenyellow;    
           border-radius: 50%;  
           /* border: 1px solid black ; */
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 270px  ;
        right: 455px;

                  
}
.dayuan6{
    width: 60px;   
       height: 60px;     
         background-color:greenyellow;    
           border-radius: 50%;  
           /* border: 1px solid black ; */
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 270px  ;
        right: 535px;

                  
}
/* .dayuan7{
    width: 60px;   
       height: 60px;     
         background-color:greenyellow;    
           border-radius: 50%;  
           
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 270px  ;
        right: 605  px;

                  
} */

.dayuan8{
    width: 60px;   
       height: 60px;   
         background-color:greenyellow;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 195px  ;
        right: 455px;

                  
}

.dayuan9{
    width: 60px;   
       height: 60px;   
         background-color:greenyellow;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 195px  ;
        right: 275px;

                  
}
.dayuan10{
    width: 60px;   
       height: 60px;   
         background-color:greenyellow;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 195px  ;
        right: 200px;

                  
}
.dayuan11{
    width: 60px;   
       height: 60px;   
       line-height: 60px;
       text-align: center;
         background-color:greenyellow;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 275px  ;
        right: 275px;
        

                  
}
.dayuan12{
    width: 60px;   
       height: 60px;   
       line-height: 60px;
       text-align: center;
       
         background-color:greenyellow;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 275px  ;
        right: 200px;

                  
}


/* 第三象限 */
.dayuan13{
    width: 60px;   
       height: 60px;   
         background-color:greenyellow;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 385px  ;
        right: 375px;

                  
}
.dayuan14{
    width: 60px;   
       height: 60px;   
         background-color:greenyellow;   
         border: 1px solid black; 
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 385px  ;
        right: 455px;

                  
}

.dayuan15{
    width: 60px;   
       height: 60px;   
       line-height: 60px;
       text-align: center;
         background-color:greenyellow;   
         
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 385px  ;
        right: 535px;

                  
}
.dayuan16{
    width: 60px;   
       height: 60px;  
       line-height: 60px;
       text-align: center; 
         background-color:greenyellow;   
         
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 465px  ;
        right: 455px;

                  
}
.dayuan17{
    width: 60px;   
       height: 60px;  
       line-height: 60px;
       text-align: center; 
         background-color:greenyellow;   
         
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 465px  ;
        right: 375px;

                  
}
.dayuan18{
    width: 60px;   
       height: 60px;  
       line-height: 60px;
       text-align: center; 
         background-color:greenyellow;   
         
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 545px  ;
        right: 375px;

                  
}
.dayuan19{
    width: 60px;   
       height: 60px;   
       line-height: 60px;
       text-align: center;
         background-color:greenyellow;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 385px  ;
        right: 275px;
        

                  
}

.dayuan20{
    width: 60px;   
       height: 60px;   
       line-height: 60px;
       text-align: center;
         background-color:greenyellow;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 385px  ;
        right: 195px;
        

                  
}
.dayuan22{
    width: 60px;   
       height: 60px;   
       line-height: 60px;
       text-align: center;
         background-color:greenyellow;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 465px  ;
        right: 275px;
        

                  
}

.dayuan21{
    width: 60px;   
       height: 60px;   
       line-height: 60px;
       text-align: center;
         background-color:greenyellow;    
           border-radius: 50%;  
               -moz-border-radius: 50%;   
                  -webkit-border-radius: 50%;

        
        position: absolute;
        top: 465px  ;
        right: 195px;
        

                  
}




</style>

<body>

     <div  class="left_box">

    <h1 class="h11" >CP Project Radar</h1>
    <p  style="color: red ; font-size:24px">Updated in May. 2019</p>

    <div class="oneone" >
            <div class="xiaoyuan_green"></div>
            <div class="priorty">Priority1</div>
        
   </div>
   <div class="oneone" >
        <div class="xiaoyuan_green"></div>
        <div class="priorty">Priority2</div>
    
</div>
<div class="oneone" >
        <div class="xiaoyuan_green"></div>
        <div class="priorty">Priority3&4</div>
    
</div>
<div class="oneone" >
        <div class="xiaoyuan_blue"></div>
        <div class="priorty">No Started Yet</div>
    
</div>

<div class="oneone" >
        <div class="xiaoyuan_purple"></div>
        <div class="priorty">completed</div>
    
</div>
   

    </div>


    <div class="right_box">
        
            <div  class="dotted1" ></div>
            <div  class="dotted2" ></div>
            <!-- <div style="border-bottom:1px dashed purple ;height: 1px;overflow:hidden"></div> -->

    </div>


    <div class="rectangle1">Reliabillity</div>
    <div class="rectangle2">Agility</div>
    <div class="rectangle3">6 Projects</div>
    <div class="rectangle4">4 Projects</div>
    <div class="rectangle5">5 Projects</div>
    <div class="rectangle6">4 Projects</div>
    <div class="rectangle7">Performan</div>
    <div class="rectangle8">People</div>
    


    <div class="dayuan1"></div>
    <div class="dayuan2"></div>
    <div class="dayuan3"></div>
    <div class="dayuan4"></div>
    <div class="dayuan5"></div>
    <div class="dayuan6"></div>
    <div class="dayuan7"></div>
    <div class="dayuan8"></div>
    <div class="dayuan9"></div>
    <div class="dayuan10"></div>
    <div class="dayuan11">Replace</div>
    <div class="dayuan12">Booklet</div>
    <div class="dayuan13"></div>
    <div class="dayuan14"></div>
    <div class="dayuan15"></div>
    <div class="dayuan16">Loading</div>
    <div class="dayuan17"></div>
    <div class="dayuan18"></div>
    <div class="dayuan19">Tablift</div>
    <div class="dayuan20">Automati</div>
    <div class="dayuan21"></div>
    <div class="dayuan22"></div>

   




   

</body>

    
</html>